.menu {
    a {
        display: block;
        color: inherit;
        text-decoration: none;
    }
}
.menuItem {
    position: relative;
    line-height: 30px;
    font-size: 12px;
    color: #a0d1ff;
    &:hover,
    &:global(.active) {
        color: #fff;
        background-color: #59aff9;
    }
    &:global(.disabled) {
        cursor: not-allowed;
    }
}

.subMenu {
    position: relative;
}
.subMenuList {
    transition: height .2s linear;
    overflow: hidden;
}
.subMenuTitle {
    position: relative;
    line-height: 30px;
    font-size: 14px;
    color: #a0d1ff;
    cursor: pointer;
    &:hover,
    &:global(.active) {
        color: #fff;
        .subMenuArrow {
            background-image: url("./image/icon-arrow-active.png");
        }
    }
    &:global(.disabled) {
        cursor: not-allowed;
    }
    &:global(.expanded) {
        .subMenuArrow {
            transform: rotate(180deg);
        }
    }
}
.subMenuArrow {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: no-repeat center url("./image/icon-arrow.png");
}
